import { useMemo, useCallback, useState } from "react"
let cache: any = null
let UseMemoCom = () => {
    let [num, setNum] = useState(10)
    let handleClick = () => {
        setNum(++num)
    }

    //可以通过useMemo根据依赖项,派发新的状态

    //useMome的第二个参数是依赖项,一定要传递的

    //类型用于限制返回值

    let multi = useMemo<number>(() => {
        return num + 100
    }, [num])

    //useCallback 类型用于限制函数

    type Icb = (val?: string) => number

    let multiFn = useCallback<Icb>(() => {
        return num - 100
    }, [num])

    //这段逻辑用于验证callback是否声明了一个新的函数

    if (!cache) {
        cache = multiFn
    }

    console.log(cache === multiFn);


    //useMemo和useCallback的区别

    //1.useMemo返回的是一个值,useCallback返回的是一个函数

    //2.useMemo在依赖项变化的时候,会重新计算结果,useCallback会在依赖项变化的时候,重新声明一个函数

    return (
        <fieldset>
            <legend>useMemo & useCallback</legend>
            <h1>state:{num}</h1>
            <h1>memo:{multi}</h1>
            <h1>callback:{multiFn()}</h1>
            <button onClick={handleClick}>点击</button>
        </fieldset>
    )
}

export default UseMemoCom